import IndivduationDiaIcon from '@/pages/ApplicationEditPage/components/IndivduationDIaIcon'
import { CommonSmallSvg } from '@/pages/workflow/components/CommonSmallTemp'
import { SyncOutlined } from '@ant-design/icons'
import { Tag, Tooltip } from 'antd'
import { useEffect, useState } from 'react'
import '../index.less'

/**
 * 选择器 if模块头部配置对象。
 *
 * @property {string} title - 模块的名称或标题。
 * @property {string} tooltipText - 显示tooltip 当鼠标悬停时显示的提示文本（tooltip）。
 * @property {boolean} delType - 是否显示删除图标（SVG），通常为布尔值，默认为 `false`。
 * @property {Function} delMoreIf - 删除功能函数，用于处理删除操作。
 * @property {number} i - 要删除项的索引位置。
 * @property {number} ifListLength - 列表长度，当列表长度大于1时显示删除选项。
 * @property ifType - 显示tag
 * @property {Function} IfTypeRefre - 点击tag时触发的方法，可以用来修改逻辑条件（如AND, OR）。
 */
export default function IfTitleCont({
  title,
  tooltipText = '',
  delType = '',
  delMoreIf,
  i,
  ifListLength,
  ifType,
  IfTypeRefre
}) {
  const [IfListLength, setIfListLength] = useState(0)
  const [IfTypeName, setIfTypeName] = useState('')
  useEffect(() => {
    if (ifListLength) {
      setIfListLength(ifListLength)
    }
    if (ifType) {
      setIfTypeName(ifType)
    }
  }, [ifListLength, ifType])

  return (
    <div className="flexRowStart flexRowJustBet IfElseCont">
      <div className="flexRowStart">
        <span className="IfElseCont_case_tem_title">{title}</span>
        {tooltipText && (
          <Tooltip placement="top" title={tooltipText} arrow>
            <div className="cursonCase ml-[4px]">
              <IndivduationDiaIcon />
            </div>
          </Tooltip>
        )}
        <Tag
          icon={<SyncOutlined />}
          className="ml-[4px] mr-[0]"
          color="blue"
          onClick={e => {
            e.stopPropagation()
            IfTypeRefre(i)
          }}
        >
          {IfTypeName}
        </Tag>
        <Tag className="ml-[4px]">优先级{i + 1}</Tag>
      </div>
      {delType && IfListLength > 1 && <CommonSmallSvg delOption={delMoreIf} i={i}></CommonSmallSvg>}
    </div>
  )
}
